<template>
  <div class="user frame_content">
    <div class="user_search">
      <div class="searchs">
        <input
          ref="userId"
          type="text"
          name="Name"
          placeholder="搜索昵称"
          style="margin-left: 5px"
        />
      </div>

      <!-- <select id="sort" v-model="selected" @change="getChangeList(selected)">
        <option
          v-for="(item, index) in changeList"
          :key="index"
          :value="index"
          >{{ item }}</option
        >
      </select> -->
      <a href="javascript:void(0);" @click="query" class="searchBtn">查询</a>
      <!-- <span class="dropdown-menu1">
        列表显示：
        <label style="display: inline-block"> 
          <input type="checkbox" value="operation" v-model="isOk" />
          操作
        </label>
        <label
          v-for="(item, index) in adminLists"
          :key="index"
          style="display: inline-block"
        >
          <input type="checkbox" v-model="item.isCheck" />
          {{ item.name }}
        </label>
        <label style="display: inline-block">
          <input type="checkbox" value="operation" v-model="isLess" />
          上下分记录
        </label>
      </span> -->
    </div>
    <table class="user_table context" style="margin-bottom: 40px">
      <thead>
        <tr>
          <!-- <th colspan="2">账变记录</th>
          <th>设置</th> -->
          <th>头像</th>
          <th>id</th>
          <th>用户昵称</th>
          <th>名称</th>
          <th>openID</th>
          
          <!-- <th>账户余额</th>
          <th datatype="operation" :style="!isOk == true ? 'display:none' : ''">
            操作
          </th> -->
          <th
            v-for="(item, i) in adminLists"
            :key="i"
            :style="!item.isCheck == true ? 'display:none' : ''"
          >
            {{ item.name }}
          </th>
          <!-- <th :style="!isLess == true ? 'display:none' : ''">
            上下分记录
          </th> -->
        </tr>
      </thead>
      <tbody id="user_list">
        <tr v-for="(item, index) in userList" :key="index">
          <td>
            <a
              @click="accountToday(1, item.account_id)"
              href="JavaScript:void(0);"
              >今日</a
            >
          </td>
          <td>
            <a
              @click="accountToday(2, item.account_id)"
              href="JavaScript:void(0);"
              >历史</a
            >
          </td>
          <td>
            <a @click="accountSaiZ(item)" href="JavaScript:void(0);">设置</a>
          </td>
          <td class="user_img">
            <img :src="item.logo" />
          </td>
          <td>{{ item.account_id }}</td>
          <td>
            {{ item.remarks ? item.remarks : item.nickname }}（<span
              style="color:#CD2828"
              >{{ levels[item.level_id] }}</span
            >）
          </td>
          <td>{{ item.balance }}</td>
          <td
            class="btnWrap"
            datatype="operation"
            :style="!isOk == true ? 'display:none' : ''"
          >
            <a
              href="JavaScript:void(0);"
              v-show="item.status == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              @click="
                changeFly(
                  item.account_id,
                  item.can_fly_order == 0 ? '1' : '0',
                  index
                )
              "
              >{{ item.can_fly_order == 1 ? "飞单开启" : "飞单关闭" }}</a
            >
            <span
              v-show="item.status == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              >|</span
            >
            <a href="JavaScript:void(0);" @click="changeRobot(item)">{{
              item.is_robot == 1 ? "切换真人" : "切换假人"
            }}</a>
            <span>|</span>
            <a
              href="JavaScript:void(0);"
              v-show="item.is_robot == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              @click="changeStatus(item)"
              >{{ item.status == 1 ? "解冻回归" : "冻结踢人" }}</a
            >
            <span
              v-show="item.is_robot == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              >|</span
            >
            <a href="JavaScript:void(0);" @click="changeDelete(item)">删除</a>
            <span>|</span>
            <a
              v-show="item.status == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              href="JavaScript:void(0);"
              @click="Receivables(item.account_id)"
              >收款账户</a
            >
            <span
              v-show="item.status == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              >|</span
            >
            <a
              v-show="item.status == 0 ? true : false"
              v-if="item.is_robot == 0 ? true : false"
              @click="
                changeAgent(
                  item.account_id,
                  item.is_agent == 1 ? '0' : '1',
                  index
                )
              "
              href="JavaScript:void(0);"
              >{{ item.is_agent == 1 ? "取消代理" : "设为代理" }}</a
            >
          </td>
          <!-- <td
            v-for="(info, index) in adminLists"
            :key="index"
            :style="!info.isCheck == true ? 'display:none' : ''"
            class="btnWrap"
          >
            0
            <a
              class="gameTodayBtn"
              @click="accountAgent('get_today', item, index)"
              >今日</a
            >
            |
            <a
              class="gameHisBtn"
              @click="accountAgent('get_history', item, index)"
              >历史</a
            >
          </td> -->
          <td class="btnWrap" :style="!isLess == true ? 'display:none' : ''">
            <a
              class="gameTodayBtn"
              @click="accountAgent3('today', item.account_id)"
              >今日</a
            >
            |
            <a
              class="gameHisBtn"
              @click="accountAgent3('history', item.account_id)"
              >历史</a
            >
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 账变记录 -->
    <div ref="popup" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 70%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          @mousedown="move"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148);
          border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          {{ accountChange }}账变
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model2"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <table class="context">
                <thead>
                  <tr>
                    <th>时间</th>
                    <th>金额</th>
                    <th>余额</th>
                    <th>信息</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(info, index) in accountRecordList" :key="index">
                    <td>{{ info.create_time }}</td>
                    <td>{{ info.money }}</td>
                    <td>{{ info.balance == "" ? 0 : info.balance }}</td>
                    <td>{{ info.change_type }}</td>
                    <td>
                      <a href="JavaScript:void(0);">xiangqing</a>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div id="model2Pages"></div>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closepopup"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 设置 -->
    <div ref="mode" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        @mousedown="move"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          修改用户信息
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model2"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>用户Id</td>
                    <td>
                      <input type="text" disabled :value="saiz.id" />
                    </td>
                    <td>用户发言</td>
                    <td>
                      <select class="talking">
                        <option>禁止</option>
                        <option>开放</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>账户名称</td>
                    <td>
                      <input type="text" disabled :value="saiz.account_id" />
                    </td>
                    <td>最近登录</td>
                    <td>
                      <input type="text" disabled :value="saiz.create_time" />
                    </td>
                  </tr>
                  <tr>
                    <td>昵称</td>
                    <td>
                      <input type="text" v-model="nickname" />
                    </td>
                    <td>当前余额</td>
                    <td>
                      <input type="text" disabled :value="saiz.balance" />
                    </td>
                  </tr>
                  <tr>
                    <td style="color:red">账户上分</td>
                    <td>
                      <input
                        type="text"
                        v-model="upscore"
                        onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                      />
                    </td>
                    <td style="color:blue">账户下分</td>
                    <td>
                      <input
                        type="text"
                        v-model="downscore"
                        onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>登录密码</td>
                    <td>
                      <input
                        type="text"
                        v-model="password"
                        placeholder="修改登录密码填，不修改留空"
                      />
                    </td>
                    <td>会员等级</td>
                    <td>
                      <select class="groupId" v-model="level">
                        <option
                          v-for="(item, index) in levels"
                          :key="index"
                          :value="index"
                          >{{ item }}</option
                        >
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>备注</td>
                    <td>
                      <input ref="remarks" type="text" v-model="remark" />
                    </td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td colspan="4" style="padding-bottom: 8px">
                      <a
                        style="padding-bottom: 8px"
                        class="btn userEditBtn"
                        @click="modify(saiz)"
                        >提交修改</a
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
              <div id="model2Pages"></div>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closemode"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 收款账户 -->
    <div ref="popup2" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        @mousedown="move"
        style="z-index: 1001; width: 600px; height: 70%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          收款账户
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model2"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <table class="context">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>账户</th>
                    <th>名称</th>
                    <th>账户类型</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(info, index) in ReceivablesList" :key="index">
                    <td>{{ info.id }}</td>
                    <td>{{ info.wxpay_account }}</td>
                    <td>{{ info.account_id }}</td>
                    <td>
                      {{
                        info.pay_status == "wx"
                          ? "微信"
                          : ReceivablesList.pay_status == ""
                          ? ""
                          : "支付宝"
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <div id="model2Pages"></div>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closepopup2"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 彩种记录 -->
    <div ref="mode2" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        @mousedown="move"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          投注记录
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model5"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <div class="model1H">
                <label>
                  开始：
                  <el-date-picker
                    v-model="value1"
                    type="datetime"
                    placeholder="开始日期"
                    default-time="05:00:00"
                  >
                  </el-date-picker>
                  结束：
                  <el-date-picker
                    v-model="value2"
                    type="datetime"
                    placeholder="结束日期"
                    default-time="05:00:00"
                  >
                  </el-date-picker>
                </label>
                <label>
                  期数:
                  <input
                    type="text"
                    class="perInput"
                    placeholder="期数查询"
                    id="dateinfo2"
                    v-model="inputVal"
                  />
                </label>
                <a
                  @click="queryLottery(item, index)"
                  href="javascript:void(0);"
                  class="sBtn"
                  >搜索</a
                >
              </div>
              <table class="context">
                <thead>
                  <tr>
                    <th>投注记录</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(lot, index) in lotteryList" :key="index">
                    <td>
                      <span class="wid1">期号：{{ lot.period_id }}</span>
                      <span class="wid2">投注：{{ lot.money }}</span>
                      <br />
                      <span class="wid1">投注类型：{{ lot.bet_content }}</span>
                      <span class="wid2">
                        亏损:
                        <span class="red">{{
                        lot.settlement_money -lot.money
                        }}</span>
                      </span>
                      <br />
                      <span class="wid1">
                        中奖号码:
                        <span class="red">{{ lot.win_number }}</span>
                      </span>
                      <span class="wid1">
                        开奖号码：
                          <span class="red">{{lot.result}}</span>
                      </span>
                      <br />
                      <span class="wid1">{{ lot.create_time | formatDate }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closemode2"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 上下分记录 -->
    <div ref="mode3" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        @mousedown="move"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          投注记录
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model1"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <div class="model1H">
                <label>
                  开始：
                  <el-date-picker
                    style="width:200px"
                    v-model="value3"
                    type="datetime"
                    placeholder="请选择时间"
                    default-time="05:00:00"
                  >
                  </el-date-picker>
                  结束：
                  <el-date-picker
                    style="width:200px"
                    v-model="value4"
                    type="datetime"
                    placeholder="请选择时间"
                    default-time="05:00:00"
                  >
                  </el-date-picker>
                </label>
                <a @click="queryscord()" href="javascript:void(0);" class="sBtn"
                  >搜索</a
                >
              </div>
              <p class="totalUpDown">
                总上分:
                <span class="totalUp">{{ this.upDownList.add }}</span>
                总回分:
                <span class="totalDown">{{ this.upDownList.take }}</span>
              </p>
              <table class="context">
                <thead>
                  <tr>
                    <th>用户</th>
                    <th>金额</th>
                    <th>申请时间</th>
                    <th>上分/下分</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(info, index) in upDownList.list" :key="index">
                    <td>{{ info.account_id }}</td>
                    <td
                      :style="
                        info.change == 'add'
                          ? 'color: red'
                          : 'info.status' == 1
                          ? 'color:blue'
                          : 'color:#333'
                      "
                    >
                      {{ info.change == "add" ? "上" : "下"
                      }}{{ info.pay_money }}
                    </td>
                    <td>{{ info.create_time }}</td>
                    <td
                      :style="
                        info.change == 'add'
                          ? 'color: red'
                          : 'info.status' == 1
                          ? 'color:blue'
                          : 'color:#333'
                      "
                    >
                      {{ info.change == "add" ? "上分" : "下分"
                      }}{{ info.status == 1 ? "成功" : "失败" }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closemode3"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import http from "@/utils/http";
export default {
  data() {
    return {
      isOk: true,
      isLess: true,
      isThaw: true,
      selected: "2",
      level: "1",
      remark: "",
      nickname: "",
      format: "",
      saiz: "",
      password: "",
      accountChange: "",
      upscore: 0,
      downscore: 0,
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      adr: "",
      adr1: "",
      inputVal: "",
      index: "",
      id: "",
      nowTime: "",
      positionX: "",
      positionY: "",
      // adminLists: [
      //   { isCheck: true, name: "重庆时时彩" },
      //   { isCheck: true, name: "PK拾" },
      //   { isCheck: true, name: "幸运飞艇" },
      //   { isCheck: true, name: "急速赛车" },
      //   { isCheck: true, name: "澳洲5" },
      //   { isCheck: true, name: "澳洲10" }
      // ],
      levels: ["黄铜", "白银", "黄金", "铂金", "钻石", "银皇冠", "金皇冠"],
      changeList: [
        "账户余额升序",
        "账户余额降序",
        "正式用户",
        "封禁踢人",
        "虚假用户"
      ]
    };
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  computed: {
    ...mapState("user", [
      "userList",
      "accountRecordList",
      "upDownList",
      "ReceivablesList",
      "lotteryList"
    ])
  },
  watch:{
    lotteryList:{
      deep: true,
      handler(n, o){
        console.log(n, o)
      }
    },
  },

  methods: {
    ...mapActions("user", [
      "getUserList",
      "getChangeList",
      "getQueryList",
      "getaccountRecordList",
      "getUpDownList",
      "getReceivablesList",
      "getLotteryList",
      "queryLotteryList",
      "queryUpDownList"
    ]),
    // 拖拽
    move(e) {
      // console.log(e)
      var oDiv = e.path[1];
      var disX = e.clientX - oDiv.offsetLeft;
      var disY = e.clientY - oDiv.offsetTop;
      document.onmousemove = function(e) {
        e.preventDefault();
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        oDiv.style.left = l + "px";
        oDiv.style.top = t - 145 + "px";
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    // 查询彩种记录期数
    queryLottery(item, index) {
      let star = Date.parse(new Date(this.value1)) / 1000;
      let end = Date.parse(new Date(this.value2)) / 1000;
      let period = this.inputVal;
      this.queryLotteryList({ item, index, star, end, period });
      console.log(item, index, star, end, period);
    },
    // 查询上下分记录
    queryscord() {
      let account_id = this.id;
      let star = Date.parse(new Date(this.value3)) / 1000;
      let end = Date.parse(new Date(this.value4)) / 1000;
      this.queryUpDownList({ star, end, account_id });
      console.log(account_id, star, end);
    },
    // 本地时间
    getTime() {
      var year = new Date(new Date()).getFullYear();
      var month =
        new Date(new Date()).getMonth() + 1 < 10
          ? "0" + (new Date(new Date()).getMonth() + 1)
          : new Date(new Date()).getMonth() + 1;
      var month2 =
        new Date(new Date()).getMonth() < 10
          ? "0" + new Date(new Date()).getMonth()
          : new Date(new Date()).getMonth();
      var date =
        new Date(new Date()).getDate() < 10
          ? "0" + new Date(new Date()).getDate()
          : new Date(new Date()).getDate();
      this.nowTime = year + "-" + month + "-" + date + " " + "08:00:00";
      if (this.adr == "get_today") {
        console.log(this.adr);
        this.value1 = this.nowTime;
      } else {
        console.log(this.adr);
        this.value1 = year + "-" + month2 + "-" + date + " " + "08:00:00";
      }
      this.value2 = this.getTomorrow(this.nowTime);
      if (this.adr1 == "today") {
        this.value3 = this.nowTime;
      } else {
        console.log(this.adr1);
        this.value3 = year + "-" + month2 + "-" + date + " " + "08:00:00";
      }
      this.value4 = this.getTomorrow(this.nowTime);
    },
    // 明天时间
    getTomorrow(date) {
      var day3 = new Date(date);
      day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
      var strMonth = day3.getMonth() + 1;
      var strDay = day3.getDate();
      if (strMonth < 10) {
        strMonth = "0" + strMonth;
      }
      if (strDay < 10) {
        strDay = "0" + strDay;
      }
      var s3 = day3.getFullYear() + "-" + strMonth + "-" + strDay;
      return s3;
    },

    // 切换飞单
    changeFly(id, canfly, index) {
      let token=sessionStorage.getItem('token')
      http
        .post(
          `/api/login/room_user/can_fly_order?account_id=${id}&can_fly_order=${canfly}&token=${token}`
        )
        .then(() => {
          this.userList[index].can_fly_order = canfly;
        });
    },
    // 切换真假人
    changeRobot(item) {
      item.account_id, item.status == 0 ? "1" : "0";
      let chRo = confirm(
        `确定将用户:${item.nickname}(${item.account_id})切换为${
          item.is_robot == 0 ? "假人" : "真人"
        }`
      );
      if (chRo == true) {
        let token=sessionStorage.getItem('token')
        http
          .post(
            `/api/login/room_user/is_robot?account_id=${
              item.account_id
            }&is_robot=${
              item.is_robot == 0 ? "1" : "0"
            }&token=${token}`,
          )
          .then(() => {
            this.getChangeList(this.selected);
          });
      }
    },
    // 是否冻结账户
    changeStatus(item) {
      let chStatus = confirm(
        `确定${item.status == 0 ? "冻结" : "解冻"}用户:${item.nickname}(${
          item.account_id
        })`
      );
      if (chStatus == true) {
        let token=sessionStorage.getItem('token')
        http
          .post(
            `/api/login/room_user/status?account_id=${
              item.account_id
            }&status=${item.status == 0 ? "1" : "0"}&token=${token}`
          )
          .then(() => {
            this.getChangeList(this.selected);
          });
      }
    },
    // 删除
    changeDelete(item) {
      let chDelete = confirm(
        `确定删除用户:${item.nickname}(${item.account_id})?`
      );
      if (chDelete == true) {
        let token=sessionStorage.getItem('token')
        http
          .post(
            `/api/login/room_user/delete?account_id=${item.account_id}&token=${token}`
          )
          .then(response => {
            console.log(response);
            this.getChangeList(this.selected);
          });
      }
    },
    // 是否设置代理
    changeAgent(account_id, agent, index) {
      let token=sessionStorage.getItem('token')
      http
        .post(
          `/api/login/room_user/is_agent?account_id=${account_id}&is_agent=${agent}&token=${token}`
        )
        .then(() => {
          this.userList[index].is_agent = agent;
        });
    },
    // 打开账变记录
    accountToday(e, id) {
      let popup = this.$refs.popup;
      this.accountChange = e == 1 ? "今日" : "历史";
      let adr = e == 1 ? "get_today" : "get_history";
      this.getaccountRecordList({ adr, id });
      popup.style.display = "block";
    },
    // 打开设置
    accountSaiZ(item) {
      let mode = this.$refs.mode;
      this.nickname = item.nickname;
      mode.style.display = "block";
      this.saiz = item;
      this.level = this.saiz.level_id;
      this.remark = item.remarks;
    },
    // 打开收款账户
    Receivables(id) {
      let popup2 = this.$refs.popup2;
      popup2.style.display = "block";
      this.getReceivablesList(id);
    },
    // 修改房间会员信息
    modify(saiz) {
      let token=sessionStorage.getItem('token')
      http
        .post(
          `/api/login/room_user/edit?add=${this.upscore}&sub=${
            this.downscore
          }&account_id=${saiz.account_id}&id=${saiz.id}&nickname=${encodeURI(
            saiz.nickname
          )}&password=${
            this.password == "" ? saiz.password : this.password
          }&level_id=${this.level}&remarks=${encodeURI(
            this.remark
          )}&token=${token}`
        )
        .then(response => {
          console.log(response);
          this.closemode();
          this.getUserList();
          this.password = "";
          this.upscore = 0;
          this.downscore = 0;
        });
    },
    // 打开彩种的今日历史记录
    accountAgent(adr, item, index) {
      this.adr = adr;
      this.item = item;
      let id = item.account_id;
      this.index = index;
      let mode2 = this.$refs.mode2;
      mode2.style.display = "block";
      this.getLotteryList({ adr, id, index});
      this.getTime();
    },
    // 打开上下分记录
    accountAgent3(adr, id) {
      this.adr1 = adr;
      this.id = id;
      let mode3 = this.$refs.mode3;
      mode3.style.display = "block";
      this.getUpDownList({ adr, id });
      this.getTime();
    },
    // 关闭账变记录
    closepopup() {
      let popup = this.$refs.popup;
      popup.style.display = "none";
    },
    // 关闭收款账户
    closepopup2() {
      let popup2 = this.$refs.popup2;
      popup2.style.display = "none";
    },
    // 关闭设置
    closemode() {
      let mode = this.$refs.mode;
      mode.style.display = "none";
    },
    // 关闭彩种的今日历史记录
    closemode2() {
      let mode2 = this.$refs.mode2;
      mode2.style.display = "none";
    },
    // 关闭上下分记录
    closemode3() {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "none";
    },
    // 搜索查询
    query() {
      let userId = this.$refs.userId;
      let userValue = userId.value;
      var isRobot = 0;
      var status = "";
      if (userValue == "") {
        this.getChangeList(this.selected);
      } else {
        if (this.selected <= 2) {
          this.getQueryList({ userValue, isRobot, status });
        } else if (this.selected == 3) {
          isRobot = "";
          status = 1;
          this.getQueryList({ userValue, isRobot, status });
        } else {
          isRobot = 1;
          status = "";
          this.getQueryList({ userValue, isRobot, status });
        }
      }
    }
  },
  created() {
    this.getUserList();
  }
};
</script>

<style>
.user {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}
.user_search {
  width: 95%;
  height: 30px;
  border-bottom: 1px solid #ddd;
  border-radius: 10px;
  margin: 20px auto 10px;
  min-width: 1600px;
}
.user_search input,
.user_search button,
div.sort,
div.searchs {
  display: inline-block;
  vertical-align: top;
}
.searchs input {
  width: 160px;
}
.user #sort {
  height: 24px;
  width: 220px;
  margin-left: 2px;
  margin-bottom: 6px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.user_search a {
  height: 25px;
  line-height: 25px;
  margin: 0 10px;
  text-decoration: none;
}
.user td a:hover {
  color: #005580;
  text-decoration: underline;
}
.user_search .searchBtn {
  width: 40px;
  height: 22px !important;
  border: 1px solid #9b9b9b;
  background-color: #e1e1e1;
  text-align: center;
  color: #333;
  display: inline-block;
}
.searchBtn:hover,
.searchBtn:focus {
  color: #005580;
  text-decoration: none;
}
.user_table {
  min-width: 1600px;
  width: 96%;
  margin: auto;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-left: 0;
  border-spacing: 0;
}
.user_table th,
.user_table td {
  border-top: 1px solid #ddd;
}

.context th {
  background-color: #eaeaea;
  font-weight: bold;
}
.dropdown-menu1 label {
  margin-left: 4px;
}
.dropdown-menu1 input {
  margin: 4px 0 0;
  line-height: normal;
}
.context td,
.context th {
  padding-top: 8px;
  padding-bottom: 4px;
  line-height: 20px;
  border-left: 1px solid #ddd;
  text-align: center;
}
.context tbody tr:hover > td,
.context tbody tr:hover > th {
  background-color: #f5f5f5;
}
.user_table td a {
  text-decoration: none;
  color: #08c;
}
.user_img {
  padding-left: 8px;
}
.user td img {
  display: block;
  width: 30px;
  height: 30px;
}

.btnWrap span {
  margin: 0 4px;
}
.user .btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
  background-position: 0 -15px;
}
.user .btn {
  background-color: #f5f5f5;
}
.btn.active,
.btn:active {
  background-image: none;
  outline: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.layui-layer {
  top: 150px;
  left: 0;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
}
.layui-layer-title {
  padding: 0 80px 0 20px;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  background-color: #f8f8f8;
  border-radius: 2px 2px 0 0;
}
.layui-layer,
.layui-layer-shade {
  position: fixed;
  margin-top: 145px;
  pointer-events: auto;
}
.layui-layer-page .layui-layer-content {
  position: relative;
  overflow: auto;
}
.layerModel {
  height: 100%;
}
#model2 .wrap,
#model3 .wrap,
#model4 .wrap {
  padding: 10px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.layerModel .wrap {
  /* border: 3px solid #405594; */
  box-sizing: border-box;
  height: 100%;
  border-top: none;
  overflow-y: auto;
}
.layerModel table {
  width: 94%;
  margin: 0 auto;
  border: 1px solid #ccc;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
}
#model2Pages,
#model1Pages {
  text-align: center;
  padding-top: 5px;
}
.layerModel table th {
  background-color: #eaeaea;
}
.layerModel table th,
.layerModel table td {
  border: 1px solid #ccc;
}
.layui-layer-shade {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layui-layer-setwin {
  position: absolute;
  right: 15px;
  *right: 0;
  top: 15px;
  font-size: 0;
  line-height: initial;
}
.layui-layer-setwin {
  top: 8px !important;
}
.layui-layer-setwin .layui-layer-close1 {
  background-position: 1px -40px;
  cursor: pointer;
}
.layui-layer-setwin a {
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  font-size: 12px;
  _overflow: hidden;
}
.layui-layer-btn a,
.layui-layer-dialog .layui-layer-ico,
.layui-layer-setwin a {
  display: inline-block;
  vertical-align: top;
}
.layui-layer-ico {
  background: url(../../images/icon.png) no-repeat;
}
#model5 .model1H label {
  display: inline-block;
  line-height: 32px;
  margin-bottom: 0;
  padding: 5px 0 5px 10px;
}
#model5 .model1H label #dateinfo2,
#model5 .model1H label #dateinfo3 {
  width: 111px;
}
#model5 .model1H label .perInput {
  width: 70px;
}
#model1 .model1H label input,
#model5 .model1H label input {
  vertical-align: inherit;
  margin-bottom: 0;
}
#model1 .sBtn,
#model5 .sBtn {
  width: 40px;
  height: 20px;
  border: 1px solid #9b9b9b;
  background-color: #e1e1e1;
  text-align: center;
  line-height: 20px;
  color: #333;
  display: inline-block;
  text-decoration: none;
  margin-left: 2px;
}
.layerModel table {
  width: 94%;
  margin: 0 auto;
  border: 1px solid #ccc;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
}
#model5 td {
  padding-left: 5px;
}
.layerModel table th,
.layerModel table td {
  border: 1px solid #ccc;
}
.wid1 {
  float: left;
  width: 60%;
  text-align: left;
}
.wid2 {
  display: inline-block;
  width: 40%;
  text-align: left;
}
.fr {
  float: right;
}
.red {
  color: red;
}
#model1 .totalUpDown {
  font-size: 14px;
  color: #333;
  line-height: 22px;
  margin: 0;
  padding-left: 20px;
  padding-bottom: 10px;
}
#model1 .model1H label {
  display: inline-block;
  line-height: 32px;
  margin-bottom: 0;
  padding: 5px 0 5px 20px;
}
#model1 .model1H label input,
#model5 .model1H label input {
  height: 24px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px;
}
</style>
